<template>
  <div class="box">
      <Header title="创建行程"></Header>
      <div class="creat-trip-box">
        <div class="creat-item">
          <p>旅游目的地</p>
          <input type="text" placeholder="请输入旅游目的地" v-model="destination">
        </div>
        <div class="creat-item">
          <p>出行时间</p>
          <input type="text" placeholder="请选择出行时间" :value="time" @focus="show=true">
        </div>
        <div class="creat-item">
          <p>出行天数</p>
          <input type="text" placeholder="请输入出行天数" v-model="daysNum">
        </div>
        <div class="creat-item">
          <p>出发城市</p>
          <input type="text" placeholder="请输入出发城市" v-model="city">
        </div>
        <div class="creat-item">
          <p>行程主题</p>
          <input type="text" placeholder="请输入主题" v-model="theme">
        </div>
        <div class="creat-item">
          <p>预计费用</p>
          <input type="text" placeholder="请输入金额" v-model="cost">
        </div>
        <router-link :to="{path:'/tripSet',query:{time:time,daysNum:daysNum}}">创建行程</router-link>
      </div>
      <van-calendar v-model="show" @confirm="onConfirm" />
  </div>
</template>

<script>
import Header from '@/components/Header/Header'
import Nav from '@/components/Nav/Nav'
export default {
name:'Trip',
components:{Header,Nav},
data(){
  return{
    destination:'',//目的地
    time:'',//出行时间
    daysNum:'',//出行天数
    city:'',//出发城市
    theme:'',//行程主题
    cost:'',//预计费用
    show:false,
  }
},
mounted(){
  this.getDay()
  
},
methods:{
  // 今天是几号
  getDay(){
    let y=new Date().getFullYear()
    let m=new Date().getMonth()+1
    let d=new Date().getDate()
    m>10?y:'0'+y
    d>10?y:'0'+y
    return this.placeholder=y+'-'+m+'-'+d
  },
  formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.time = this.formatDate(date);
    }
}
}
</script>

<style lang="less" scoped>
.box{
  padding-bottom:0;
}
.creat-trip-box{
  padding:20/7.5vw 40/7.5vw;
  .creat-item{
    p{
      text-align: center;
      color: #0FD2B2;
      font-size: 32/7.5vw;
      margin:30/7.5vw 0;
    }
    input,div{
      width: 100%;
      height: 80/7.5vw;
      padding:0 10/7.5vw;
      background-color: transparent;
      border: 1px solid #ccc;
      border-radius: 6/7.5vw;
      text-align: center;
    }
  }
  a{
    display: block;
    width: 100%;
    height: 78/7.5vw;
    margin-top:70/7.5vw;
    border: 2/7.5vw solid #0FD2B2;
    border-radius: 34/7.5vw;
    text-align: center;
    line-height: 80/7.5vw;
    font-size: 32/7.5vw;
    color: #0FD2B2;
  }
}
</style>